<template>
  <a-card style="width: 100%" title="驳回原因">
    <template #extra>
      <a-tooltip placement="top">
        <template #title>
          <span>返回上级</span>
        </template>
        <a-button size="small" @click="getOut"> <RollbackOutlined /></a-button>
      </a-tooltip>
    </template>
    <div class="header">
      <div class="change">
        <!-- 内容 根据后端返回内容，返回不同的结果-->
        <div class="content">
          <h2 style="color: #d85050; text-align: center">审核不通过原因</h2>
          <div class="contentAreaText">
            <div class="causeBox">
              <h4>基金科审批意见:</h4>
              <p style="margin: 0; padding: 0; text-align: left">
                {{ blauditopinionj ? blauditopinionj : '暂无' }}
              </p>
            </div>
            <div class="causeBox">
              <h4>财务室审批意见:</h4>
              <p style="margin: 0; padding: 0; text-align: left">
                {{ blauditopinionc ? blauditopinionc : '暂无' }}
              </p>
            </div>
            <div class="causeBox">
              <h4>副主任审批意见:</h4>
              <p style="margin: 0; padding: 0; text-align: left">
                {{ blauditopinionf ? blauditopinionf : '暂无' }}
              </p>
            </div>
            <div class="causeBox">
              <h4>主任审批意见:</h4>
              <p style="margin: 0; padding: 0; text-align: left">
                {{ blauditopinionz ? blauditopinionz : '暂无' }}
              </p>
            </div>
            <div class="causeBox">
              <h4>秘书长审批意见:</h4>
              <p style="margin: 0; padding: 0; text-align: left">
                {{ blext4 ? blext4 : '暂无' }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </a-card>
  <br />
</template>

<script setup>
  import { ref, reactive, defineEmits, defineProps, onMounted } from 'vue';
  import { smartSentry } from '/@/lib/smart-sentry';
  import { message } from 'ant-design-vue';
  const status = ref(0);
  //  基金科审批意见
  const blauditopinionj = ref('');
  // 财务室审批意见
  const blauditopinionc = ref('');
  // 副主任审批意见
  const blauditopinionf = ref('');
  //主任审批意见
  const blauditopinionz = ref('');
  //秘书长审批意见
  const blext4 = ref('');
  //申报状态
  const props = defineProps({
    DateId: Object,
  });
  async function getFindInitStatus() {
    blauditopinionj.value = props.DateId.blauditopinionj;
    blauditopinionc.value = props.DateId.blauditopinionc;
    blauditopinionf.value = props.DateId.blauditopinionf;
    blauditopinionz.value = props.DateId.blauditopinionz;
    blext4.value = props.DateId.blext4;
  }
  onMounted(() => {
    getFindInitStatus();
  });

  //返回的按钮操作
  const emit = defineEmits();
  const getOut = () => {
    let obj = {
      type: 0,
    };
    emit('getBlack', obj);
  };

</script>

<style lang="scss" scoped>
  .causeBox {
    width: 80%;
    text-align: left;
    border-block-end: 1px solid rgba(5, 5, 5, 0.06);
    margin: 20px auto;
    h4 {
      color: rgba(0, 0, 0, 0.88);
      font-size: 15px;
      line-height: 1.5714285714285714;
      font-weight: bold;
    }
    p {
      color: rgba(0, 0, 0, 0.45);
      font-size: 14px;
    }
  }
  .header {
    width: 100%;
    margin: auto;
    padding: 10px; /* 调整内边距来保持间隙一致 */
    box-sizing: border-box; /* 确保内边距包含在总宽度内 */
    ul {
      display: flex; /* 使用 Flexbox 布局 */
      justify-content: center; /* 居中对齐 */
      padding: 0;
      margin: 0;
      list-style: none;
      width: 100%;
    }
    li {
      width: 250px;
      height: 40px;
      line-height: 20px;
      padding: 10px;
      background-color: #dedede;
      margin: 0px 1px;
      text-align: center;
      color: #ffff;
    }
    li:first-child {
      border-bottom-left-radius: 20px;
      border-top-left-radius: 20px;
    }
    li:last-child {
      border-bottom-right-radius: 20px;
      border-top-right-radius: 20px;
    }
  }
  .change {
    margin-top: 30px;
  }
  .tips {
    margin: 10px 4.3% 20px;
    background: #fffcf5;
    line-height: 38px;
    border: 1px solid #b99f6c;
    font-size: 14px;
    text-align: center;
    color: #b8a273;
  }
  .content {
    background: #f7f7f7;
    border: 1px solid #dedede;
    margin: 40px 4.3% 0px 4.3%;
    padding: 15px 19px;
    padding-bottom: 50px;
    min-height: 450px;
  }
  .contentArea {
    text-align: center;
    margin-top: 30px;
  }
  .contentAreaText {
    text-align: center;
    width: 100%; /* 设置宽度为100%，可以根据需要调整 */
    overflow-wrap: break-word; /* 允许单词在超出边界时换行 */
    word-wrap: break-word; /* 兼容旧版浏览器 */
    h2 {
      margin: 20px 0 1.5em 0;
      color: red;
    }
  }
</style>
